import Vue from 'vue'
import VueRouter from 'vue-router'


//引入组件
import Login from '@/views/login/Login.vue';
import Layout from '@/views/layout/Layout.vue';


Vue.use(VueRouter)

// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
}


//静态路由
const routes = [
    //重定向
    {
        path: '/',
        redirect: '/login'
    },
    //登陆页
    {
        path: '/login',
        component: Login
    },
    {
        //后台首页
        path: '/home',
        component: Layout,
        meta: { title: '后台首页' },
        redirect: '/home',
        children: [{
            path: '/home',
            component: () =>
                import ('@/views/home/Home.vue')
        }]

    }, //404页面
    {
        path: '*',
        component: () =>
            import ('@/views/NotFound.vue')
    }
]

//动态路由
const asyncRoutes = [{
    //订单管理
    path: '/order',
    component: Layout,
    meta: { title: '订单管理', role: ['suqer', 'normal'], icon: 'icon-order1' },
    redirect: '/order',
    children: [{
            path: '/order',
            meta: { title: '订单列表', role: ['suqer', 'normal'] },
            component: () =>
                import ('@/views/order/Order.vue')
        },
        {
            path: '/order/orderedit',
            meta: { title: '订单详情', role: ['suqer', 'normal'] },
            component: () =>
                import ('@/views/order/OrderEdit.vue')
        }
    ]

}, {
    //商品管理
    path: '/goods',
    component: Layout,
    meta: { title: '商品管理', role: ['suqer', 'normal'], icon: 'icon-goods' },
    redirect: '/goods/cateadd',
    children: [{
        path: '/goods/cateadd',
        meta: { title: '商品分类', role: ['suqer', 'normal'] },
        component: () =>
            import ('@/views/goods/CateAdd.vue')
    }, {
        path: '/goods/goodsadd',
        meta: { title: '商品添加', role: ['suqer', 'normal'] },
        component: () =>
            import ('@/views/goods/GoodsAdd.vue')
    }, {
        path: '/goods/goodslist',
        meta: { title: '商品列表', role: ['suqer', 'normal'] },
        component: () =>
            import ('@/views/goods/GoodsList.vue')
    }]

}, {
    //店铺管理
    path: '/shop',
    component: Layout,
    meta: { title: '店铺管理', role: ['suqer', 'normal'], icon: 'icon-shop' },
    redirect: '/shop',
    children: [{
        path: '/shop',
        meta: { title: '店铺详情', role: ['suqer', 'normal'] },
        component: () =>
            import ('@/views/shop/Shop.vue')
    }]

}, {
    //账号管理
    path: '/account',
    component: Layout,
    meta: { title: '账号管理', role: ['suqer', 'normal'], icon: 'icon-account' },
    redirect: '/account/accountlist',
    children: [{
        path: '/account/accountlist',
        meta: { title: '账号列表', role: ['suqer', 'normal'] },
        component: () =>

            import ('@/views/account/AccountList.vue')
    }, {
        path: '/account/accountadd',
        meta: { title: '账号添加', role: ['suqer', 'normal'] },
        component: () =>
            import ('@/views/account/AccountAdd.vue')
    }, {
        path: '/account/modify',
        meta: { title: '修改密码', role: ['suqer', 'normal'] },
        component: () =>
            import ('@/views/account/Modify.vue')
    }, {
        path: '/account/personal',
        meta: { title: '个人中心', role: ['super', 'normal'] },
        component: () =>
            import ('@/views/account/Personal.vue')
    }]

}, {
    //销售统计
    path: '/total',
    component: Layout,
    meta: { title: '销售统计', role: ['suqer', 'normal'], icon: 'icon-total' },
    redirect: '/total/goodstotal',
    children: [{
        path: '/total/goodstotal',
        meta: { title: '商品统计', role: ['suqer', 'normal'] },
        component: () =>
            import ('@/views/total/GoodsTotal.vue')
    }, {
        path: '/total/ordertotal',
        meta: { title: '订单统计', role: ['suqer', 'normal'] },
        component: () =>
            import ('@/views/total/OrderTotal.vue')
    }]

}, ]



const router = new VueRouter({
    routes
})

//路由前置守卫
router.beforeEach((to, from, next) => {
    //使用token值来判定用户是否登录
    let tk = localStorage.getItem('tk')
        //判定如果是去登录页，直接放行
    if (to.path == '/login') {
        next()
    }

    //判定是否有token，如果有，就可以跳转，如果没有就拉倒登录页
    if (tk) {
        next()
    } else {
        next({ path: '/login' })
    }

    console.log(tk);
})



//计算路由操作
export function calcRoutes() {
    //判定是否进行动态计算路由----一定要有角色才进行下一步,否则不执行后面的代码
    let roles = localStorage.getItem('role');
    if (!roles) return;

    // 计算一级路由
    let r = asyncRoutes.filter(v => {
        // console.log(v);
        //判定, 当前角色有哪些一级路由
        // if(v.meta&&v.meta.role&&v.meta.role.includes(roles)){
        //   return v
        // }
        return v.meta && v.meta.role && v.meta.role.includes(roles);
    })

    // 计算二级路由
    r.filter(v => {
            //判定 找children 把计算出来的路由给到 children
            if (v.children && v.children.length) {
                //  console.log(v.children);
                v.children = v.children.filter(vv => {
                    return vv.meta && vv.meta.role && vv.meta.role.includes(roles)
                })
            }

        })
        //把计算出来的路由添加到 router中 
        //vueRouter官方提供 两个方法来添加计算出来的路由
        //路由对象.addRoute(对象)
        //路由对象.addRoutes(数组)

    // router.addRoutes(r)
    r.filter(v => {
        router.addRoute(v)
    })

    //保存计算的路由到本地
    localStorage.setItem('routes', JSON.stringify([{
        path: '/home',
        component: Layout,
        redirect: '/home',
        meta: { title: '后台首页' },
    }, ...r]))

    console.log(r);

}


//调用--第一次
calcRoutes()

export default router